<template>
  <div class="theme-switcher">
    <label for="theme-select">🌈 主题：</label>
    <select id="theme-select" v-model="themeStore.currentTheme">
      <option value="blue">蓝色</option>
      <option value="green">绿色</option>
      <option value="purple">紫色</option>
    </select>
  </div>
</template>

<script lang="ts" setup>
import { useThemeStore } from '@/stores/theme/theme';

const themeStore = useThemeStore();
</script>

<style scoped>
.theme-switcher {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: #111;
  color: #0ff;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
  z-index: 999;
}

select {
  background: transparent;
  color: #0ff;
  border: 1px solid #0ff;
  padding: 4px;
}
</style>
